溫習 react 之前，先複習一些常用的 js 知識避免消化不良囉

• callback function
• destructuring

callback function

簡單說，就是將 function 作為 parameter 傳入到另一個 function 中

const clickBtn = document.getElementById("clickBtn");

// 這裡的 getNameAndGreet 就是作為 parameter 傳進 addEventListener 
clickBtn.addEventListener("click", getNameAndGreet);

function getNameAndGreet() {
  let userName = "";
  const nameInput = document.getElementById("nameInput"),
    greetingCont = document.getElementById("greetingCont");

  userName = nameInput.value;
  greetingCont.innerHTML = `Hello ,${userName}!`;
}

再舉個例子

let allUserData = [];

function logStuff (userData){
  if( typeof(userData) === 'string'){
     console.log(userData);
  } else if (typeof(userData) === 'object'){
    for(let item in userData){
      console.log(`item: ${userData[item]}`)
    }
  }
}

function getInput(options , callback){
  allUserData.push(options);
  callback(options);
}

// 這裡的 logStuff 即是 callback function，做為 parameter 傳到 getInput function 中
getInput( {name:'Teddy' , age:29}, logStuff )

如果 callback function 中有關於 this 的操作，則要視情況對 callback function 綁定

const nameData = {
  fullName: "unset",
  getFullName: function (firstName, lastName) {
    this.fullName = firstName +" "+ lastName;
    console.log(this.fullName); // "Kevin Hovnan"
    console.log(this) // this refer to window boject
  }
};

function joinName(firstName , lastName, callback) {
  callback(firstName , lastName);
}

joinName('Kevin' ,'Hovnan' , nameData.getFullName);

console.log(nameData.fullName) // unset
console.log(window.fullName) // "Kevin Hovnan"

將 callback function 綁定到 nameData 上

const nameData = {
  fullName: "unset",
  getFullName: function (firstName, lastName) {
    this.fullName = firstName +" "+ lastName;
    console.log(this.fullName); // "Kevin Hovnan"
    console.log(this) // nameData it self
  }
};

function joinName(firstName , lastName, callback , callbackObj) {
  callback.apply(callbackObj , [ firstName , lastName]);
}

joinName('Kevin' ,'Hovnan' , nameData.getFullName , nameData);

console.log(nameData.fullName) // "Kevin Hovnan"
console.log(window.fullName) // undefined

apply / call / bind 差異

Destructuring assignment

解構賦值，簡單說就是把陣列或物件解開，擷取特定值並賦值給變數

陣列解構賦值 array destructuring

let arrayItem=[2,4,6,8,10];
let myVal , leftVal;

// 擷取 arrayItem[0] 並賦值給 firstVal ，剩下的值都賦值給 leftVal
[ firstVal , ...leftVal] = arrayItem;
console.log(firstVal); // 2 type:numbe
console.log(leftVal); // [4,6,8,10] type:object

for(let i = 0;i<leftVal.length;i++){
  console.log('otherVal:'+leftVal[i]);
}

// 也可以只擷取想要的部分，剩下的都忽略掉(取陣列中的[0]跟[1])
[ firstVal ,secondVal] = arrayItem;
// 取陣列中的[1]跟[2]，其他不理會
[ ,secondVal ,thirdVal] = arrayItem;

// 但千萬不可以寫這樣，會出現錯誤 ...rest 其後不能有 , 符號
[ firstVal , ...leftVal,] = arrayItem;

物件解構賦值 object destructuring

let person = {firstName:'Craig' , lastName:'Chen'};

// in es5
let firstName = person.firstName;
let lastName = person.lastName;

// 以物件解構賦值的方式 with object destructuring method
let {firstName:fName ,lastName:lName} = person;

格式如下

let {property1:variable1 ,property2:variable2} = object;

如果 propertyName 跟 variableName 名稱相同，還可以簡化為

let { variable1 , variable2 } = object;

以上面的例子來說就會是這樣

let person = {firstName:'Craig' , lastName:'Chen'};
let { firstName , lastName } = person;

下篇接續快速回顧一下 array method / spread & rest operators ..
(該不會寫到30天結果都在複習javascript吧XD

參考資料

http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/
https://www.javascripttutorial.net/es6/javascript-object-destructuring/